<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Bootstrap -->
    <link href="../../style/bootstrap-4.6.0-dist/css/bootstrap.css" rel="stylesheet">
</head>
<style>
    #add_btn2 {
        width: 85px;
        height: 38px;
        color: white;
        background: #f58f98;
    }
    #xhOrderDate, #gdDate, #gdAddress, #revCurrencyModeNo,#revCurrencyLastDate,#currencyNo,#prePayCurrency,#goodsSumCurrency,
    #taxSumCurrency,#creditCurrency,#addtionalCurrency,#traderNo,#treasurerNo,#checkRes,#customerNo,
    #goodsClassCounts,#sumProfitCurrency,#itemsQty,#itemsPrice,#itemsInfoNo,#itemsNo,#itemsProfitPrice{
        width: 300px;
        display: inline-block;
        margin-top: 10px;
    }
    label{
        width: 146px;
    }
    #orderForm_form2{
        margin-left: 15px;
    }
    label{
        font-weight: bold;
    }
    #return_btn {
        width: 85px;
        height: 38px;
        color: white;
        background: #fd7e14;
        margin-left: 35px;
    }
</style>
<body>
<div id="orderForm_div">
    <form id="orderForm_form2">
        <label>售货订单日期：</label>
        <input id="xhOrderDate" name="xhOrderDate" class="form-control" type="date"><br>
        <label>取货日期：</label>
        <input id="gdDate" name="gdDate" class="form-control" type="date"><br>
        <label>取货地点：</label>
        <input id="gdAddress" name="gdAddress" class="form-control" type="text"><br>
        <div class="form-group">
            <label for="revCurrencyModeNo">收款方式:</label>
            <select class="form-control" id="revCurrencyModeNo" name="revCurrencyModeNo">
                <option value="0">请选择</option>
                <option value="1">现金</option>
                <option value="2">微信</option>
                <option value="3">支付宝</option>
                <option value="4">银行卡</option>
            </select>
        </div>
        <label>收款最迟日期：</label>
        <input id="revCurrencyLastDate" name="revCurrencyLastDate" class="form-control" type="date"><br>
        <div class="form-group">
            <label for="currencyNo">货币种类:</label>
            <select class="form-control" id="currencyNo" name="currencyNo">
                <option value="0">请选择</option>
                <option value="1">人民币</option>
                <option value="2">美元</option>
                <option value="3">日元</option>
                <option value="4">韩元</option>
            </select>
        </div>
        <label>预付金额：</label>
        <input id="prePayCurrency" name="prePayCurrency" class="form-control" type="number" step="0.1"><br>
        <label>货物总额：</label>
        <input id="goodsSumCurrency" name="goodsSumCurrency" class="form-control" type="number" step="0.1"><br>
        <label>税率总额：</label>
        <input id="taxSumCurrency" name="taxSumCurrency" class="form-control" type="number" step="0.1"><br>
        <label>赊欠金额：</label>
        <input id="creditCurrency" name="creditCurrency" class="form-control" type="number" step="0.1"><br>
        <label>运调费用：</label>
        <input id="addtionalCurrency" name="addtionalCurrency" class="form-control" type="number" step="0.1"><br>
        <label>业务员编号：</label>
        <input id="traderNo" name="traderNo" class="form-control" type="text"><br>
        <label>财务员编号：</label>
        <input id="treasurerNo" name="treasurerNo" class="form-control" type="text"><br>
        <label>审核：</label>
        <input class="isCheck" type="radio" name="isCheck" value="1">通过
        <input class="isCheck" type="radio" name="isCheck" value="2">未通过
        <input class="isCheck" type="radio" name="isCheck" value="3">审核中<br>
        <label>审核结果：</label>
        <input id="checkRes" name="checkRes" class="form-control" type="text"><br>
        <label>收款收据：</label>
        <input class="isCheck" type="radio" name="recCurrencyRcept" value="1">已收款
        <input class="isCheck" type="radio" name="recCurrencyRcept" value="2">未收到<br>
        <div class="form-group">
            <label for="customerNo">客户信息:</label>
                <select class="form-control" id="customerNo" name="customerNo">
                    <option>请选择</option>
                    <option v-for="customer in list1" :value="customer.customerNo">{{ customer.customerNo }}</option>
                </select>
        </div>
        <label>货物种类数：</label>
        <input id="goodsClassCounts" name="goodsClassCounts" class="form-control" type="text"><br>
        <label>总净高额：</label>
        <input id="sumProfitCurrency" name="sumProfitCurrency" class="form-control" type="number" step="0.1"><br>
        <label>订货数量：</label>
        <input id="itemsQty" name="itemsQty" class="form-control" type="text"><br>
        <label>订货单价：</label>
        <input id="itemsPrice" name="itemsPrice" class="form-control" type="number" step="0.1"><br>
        <div class="form-group">
            <label for="itemsInfoNo">物质明细表:</label>
                <select id="itemsInfoNo" class="form-control" name="itemsInfoNo">
                    <option>请选择</option>
                    <option v-for="info in list2" :value="info.itemsInfoNo">{{ info.itemsInfoNo }}</option>
                </select>
        </div>
        <div class="form-group">
            <label for="itemsNo">物质价格表:</label>
                <select id="itemsNo" class="form-control" name="itemsNo">
                    <option>请选择</option>
                    <option v-for="price in list3" :value="price.itemsNo">{{ price.itemsNo }}</option>
                </select>
        </div>



        <button type="button" @click="addOrderForm" id="add_btn2">保存</button>
        <button type="button" id="return_btn" @click="returnOrderFormList">返回</button>
    </form>

</div>
    <script src="../../style/jquery-3.3.1.js"></script>
    <script src="../../style/vue.js"></script>
    <script src="../../style/bootstrap-4.6.0-dist/js/bootstrap.js"></script>
    <script>
        let list1;
        let list2;
        let list3;

        $(function (json) {
            list1=Ajax1();
            list2=Ajax2();
            list3=Ajax3();
            let app = new Vue({
                el: "#orderForm_div",
                data:{
                    json,
                    list1:list1.list,
                    list2:list2.list,
                    list3:list3.list,
                },
                methods:{
                    addOrderForm:function (){
                        $.ajax({
                            type:"post",
                            url: "../../OrderForm/addOrderForm",
                            data:$("#orderForm_form2").serialize(),
                            dataType: "json",
                            success:function (data){
                                if(data.message=='添加成功'){
                                    alert("添加成功");
                                    location.href="orderForm_list.html";
                                }

                            }
                        })
                    },
                    returnOrderFormList:function (){
                        location.href="orderForm_list.html";
                    }
                }
            })
        })

        //首先查询公司存在那些客户
        function Ajax1(){
            let list1;
            $.ajax({
                type: "post",
                url: "../../Customer/selCustomerCustomerNo",
                dataType: "json",
                async: false,
                success: function (json) {
                    list1=json;
                }
            });
            return list1;
        }

        function Ajax2(){
            //首先查询公司存在那些物质明细
            let list2;
            $.ajax({
                type: "post",
                url: "../../Info/selMatterInfoItemsInfoNo",
                dataType: "json",
                async: false,
                success: function (json) {
                    list2=json;
                    console.log(list2);
                }
            });
            return list2;
        }

        function Ajax3(){
            let list3;
            $.ajax({
                type: "post",
                url: "../../Price/selMatterPriceItemsNo",
                dataType: "json",
                async: false,
                success: function (json) {
                    list3=json;
                }
            })
            return list3;
        }

    </script>
</body>
</html>